<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{/bootstrap/css/bootstrap-style.css}" rel="stylesheet" />
    <link rel="stylesheet" href="/mdui/css/mdui.css">



    <script th:src="@{/jquery/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script src="/mdui/js/mdui.js"></script>

</head>
<body>
    <div class="ground">
        <div class="dialog">

            <div class="mdui-textfield mdui-textfield-floating-label mdui-m-x-5">
                <label class="mdui-textfield-label">账号</label>
                <input class="mdui-textfield-input" type="text" required="required"/>
                <div class="mdui-textfield-error">用户名不能为空</div>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label  mdui-m-x-5">
                <label class="mdui-textfield-label">Password</label>
                <!--<input class="mdui-textfield-input" name="adminPassword" type="password" required=""/>-->
                <!--<input class="mdui-textfield-input" name="password" type="password" required=""/>-->
                <input class="mdui-textfield-input" name="adminPassword" type="password"
                       pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required=""/>
                <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
            </div>


            <div style="display: flex;justify-content: flex-end">
                <button  type="button" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-deep-purple mdui-m-r-5 mdui-m-b-2" id="loginBtn">Login </button>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function () {


    })

</script>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .ground{
        position: fixed;
        width: 100%;
        height: 100%;        background: url("/image/login-bg.jpg") no-repeat 0 0;
        background-size: 100% 100%;

    }
    .dialog{
        font-family: "Helvetica Neue";
        /*font-size: 30px;*/
        text-align: center;
        margin: -15em 0 0 -18em;
        width: 40em;
        height: 30em;
        top: 50%;
        left: 50%;
        position: absolute;
        background: white;
    }
</style>
</html>